<script setup>
import { defineAsyncComponent, ref } from 'vue';

const props = defineProps({
  option: {
    type: Object,
    default: () => {},
    required: true,
  },
});

const emit = defineEmits(['refresh', 'changeSearch']);

const SearchMore = defineAsyncComponent(
  () => import('#/component/tableComp/SearchMore.vue'),
);
const TableColumn = defineAsyncComponent(
  () => import('#/component/tableComp/TableColumn.vue'),
);
const VabQueryFormTopPanel = defineAsyncComponent(
  () => import('#/component/VabQueryForm/components/VabQueryFormTopPanel.vue'),
);
const VabQueryFormLeftPanel = defineAsyncComponent(
  () => import('#/component/VabQueryForm/components/VabQueryFormLeftPanel.vue'),
);
const VabQueryFormRightPanel = defineAsyncComponent(
  () =>
    import('#/component/VabQueryForm/components/VabQueryFormRightPanel.vue'),
);
const VabQueryForm = defineAsyncComponent(
  () => import('#/component/VabQueryForm/index.vue'),
);

const searchContent = ref(props.option.columns.searchContent);
const columns = ref(props.option.columns.tableColumns); // 表格列表
const lineHeight = ref('large'); // 表格行高
const border = ref(true);
const height = ref(props.option.height);
const stripe = ref(true);
const checkList = ref(columns.value.map((n) => n.label));
const layout = 'total, sizes, prev, pager, next, jumper';

const selectRows = ref([]);
// 列表选中
const setSelectRows = (val) => {
  selectRows.value = val;
};

// 查询
const handleSearch = async (searchData) => {
  await emit('changeSearch', {
    ...props.option.queryForm,
    pageNum: 1,
    pageSize: props.option.queryForm.pageSize,
    ...searchData,
  });
  console.log(props.option.queryForm, 'handleSearch');
  // await emit('refresh',props.option.queryForm)
};
// size 改变
const handleSizeChange = (val) => {
  emit('changeSearch', {
    ...props.option.queryForm,
    pageSize: val,
  });
  console.log(props.option.queryForm, 'handleSizeChange');
};
// current 改变
const handleCurrentChange = (val) => {
  emit('changeSearch', {
    ...props.option.queryForm,
    pageNum: val,
  });
  console.log(props.option.queryForm, 'handleCurrentChange');
};
const getRowKeys = (row) => {
  return row.id;
};
</script>
<template>
  <div class="tableList">
    <VabQueryForm>
      <VabQueryFormTopPanel v-if="searchContent && searchContent.length > 0">
        <SearchMore
          :row-count="option.rowCount || 4"
          :search-content="searchContent"
          @on-search="handleSearch"
        />
      </VabQueryFormTopPanel>
      <VabQueryFormLeftPanel v-if="searchContent && searchContent.length > 0">
        <slot :select-rows="selectRows" name="searchButton"></slot>
      </VabQueryFormLeftPanel>
      <!-- 表格操作 -->
      <VabQueryFormRightPanel>
        <!--        <el-button-->
        <!--          style="margin: 0 10px 10px 0 !important"-->
        <!--          text-->
        <!--          type="primary"-->
        <!--          @click="-->
        <!--            emit('changeSearch', {-->
        <!--              ...option.queryForm,-->
        <!--              current: 1,-->
        <!--              size: 10,-->
        <!--            })-->
        <!--          "-->
        <!--        >-->
        <!--          <el-icon><Refresh /></el-icon>-->
        <!--        </el-button>-->
        <!--        <el-popover popper-class="custom-table-radio" trigger="hover">-->
        <!--          <el-radio-group v-model="lineHeight">-->
        <!--            <el-radio label="large" value="large">大</el-radio>-->
        <!--            <el-radio label="default" value="default">中</el-radio>-->
        <!--            <el-radio label="small" value="small">小</el-radio>-->
        <!--          </el-radio-group>-->
        <!--          <template #reference>-->
        <!--            <el-button-->
        <!--              style="margin: 0 10px 10px 0 !important"-->
        <!--              text-->
        <!--              type="primary"-->
        <!--            >-->
        <!--              <el-icon><Operation /></el-icon>-->
        <!--            </el-button>-->
        <!--          </template>-->
        <!--        </el-popover>-->
        <!--        <el-popover popper-class="custom-table-checkbox" trigger="hover">-->
        <!--          <template #reference>-->
        <!--            <el-button style="margin: 0 0 10px !important" text type="primary">-->
        <!--              <el-icon><Setting /></el-icon>-->
        <!--            </el-button>-->
        <!--          </template>-->
        <!--          <el-checkbox-group v-model="checkList">-->
        <!--            <el-checkbox-->
        <!--              v-for="element in columns"-->
        <!--              :key="element.label"-->
        <!--              :disabled="element.disableCheck === true"-->
        <!--              :label="element.label"-->
        <!--              :value="element.label"-->
        <!--            >-->
        <!--              {{ element.label }}-->
        <!--            </el-checkbox>-->
        <!--          </el-checkbox-group>-->
        <!--        </el-popover>-->
      </VabQueryFormRightPanel>
    </VabQueryForm>
    <template v-if="option.type && option.type === 'treeTab'">
      <el-table
        ref="tableSortRef"
        :border="border"
        :data="option.tableList"
        :height="height"
        :lazy="true"
        :row-key="getRowKeys"
        :size="lineHeight"
        :stripe="stripe"
        :tree-props="{ children: option.children }"
        class="yx-table"
        default-expand-all
        v-loading="option.tableListLoading"
        @selection-change="setSelectRows"
      >
        <el-table-column v-if="option.select" align="center" type="selection" />
        <el-table-column
          :prop="option.treeKey || 'name'"
          label="名称"
          width="280"
        />
        <TableColumn :check-list="checkList" :columns="columns" />
        <el-table-column align="center" label="操作" width="200">
          <template #default="{ row }">
            <el-button-group>
              <slot :row="row" name="tabButton"></slot>
            </el-button-group>
          </template>
          <template #empty>
            <el-empty class="vab-data-empty" description="暂无数据" />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="option.total"
        :current-page="option.queryForm.current"
        :layout="layout"
        :page-size="option.queryForm.size"
        :total="option.total"
        jumper-text="前往"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </template>
    <template v-else>
      <el-table
        ref="tableSortRef"
        :border="border"
        :data="option.tableList"
        :height="height"
        :size="lineHeight"
        :stripe="stripe"
        class="yx-table"
        v-loading="option.tableListLoading"
        @selection-change="setSelectRows"
      >
        <el-table-column
          v-if="option.index"
          align="center"
          label="序号"
          width="80"
        >
          <template #default="{ $index }">
            {{
              (option.queryForm.pageNum - 1) * option.queryForm.pageSize +
              ($index + 1)
            }}
          </template>
        </el-table-column>
        <el-table-column v-else align="center" type="selection" />
        <TableColumn :check-list="checkList" :columns="columns" />
        <el-table-column
          v-if="option.tabCol"
          :label="option.tabColInfo.label"
          :prop="option.tabColInfo.prop"
          :width="option.tabColInfo.width || '800'"
          align="center"
        >
          <template #default="{ row, column, $index }">
            <el-button-group>
              <slot :index="$index" :row="row" name="tabCol"></slot>
            </el-button-group>
          </template>
        </el-table-column>
        <el-table-column
          v-if="!option.isShow"
          align="center"
          class="tab-button"
          fixed="right"
          label="操作"
          width="240"
        >
          <template #default="{ row }">
            <el-button-group>
              <slot :row="row" name="tabButton"></slot>
            </el-button-group>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty class="vab-data-empty" description="暂无数据" />
        </template>
      </el-table>
      <el-pagination
        :current-page="option.queryForm.pageNum"
        :layout="layout"
        :page-size="option.queryForm.pageSize"
        :total="option.total"
        jumper-text="前往"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </template>
  </div>
</template>
<style lang="scss">
.tableList {
  .yx-table {
    opacity: 0;
    transform: translateX(-20px);
    animation: table-list-in 1.5s forwards;
  }

  .el-table th.el-table__cell {
    color: #fff;
    background-color: hsl(var(--primary) / 85%) !important;
  }

  .el-pagination {
    justify-content: center;
    margin: 12px 0 0;
    font-weight: normal;
    color: var(--el-color-black);
  }
}

@keyframes table-list-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
